<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>排行榜</title>
	<link rel="stylesheet" href="css/public.css">
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7sWshF9muBbr2Fv6ItZTcgOANovRlLuZ"></script>
	<style>
		html,
		body {
			width: 100%;
			height: 100vh;
			position: absolute;
			/* background-color: #bbebef; */
			text-align: center;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		.contet {
			width: 100%;
			height: 100vh;
			position: absolute;
			/* background-color: #bbebef; */
			text-align: center;
		}

		.exit {
			width: 15%;
			z-index: 999;
			position: fixed;
			left: 5%;
			top: 5%;
		}

		.explain {
			width: 15%;
			z-index: 999;
			position: fixed;
			left: 80%;
			top: 5%;
		}

		.container {
			width: 100%;
			height: 100vh;
			left: 0;
			top: 0;
			position: absolute;
			background-color: #bbebef;
		}

		.page {
			width: 100%;
			height: 100vh;
			background: url(images/bg.png) no-repeat;
			background-size: 100%;
			z-index: 2;
			overflow: hidden;
		}

		.page2 {
			width: 83%;
			margin: 0 auto;
			height: 100vh;
			background: url(images/dj2.png) no-repeat;
			background-size: 100%;
			z-index: 2;
			overflow: hidden;
			display: none;
		}

		.section {
			margin-top: 15%;
			overflow-y: scroll;
			overflow-x: scroll;
			height: 200px;
			overflow-y: auto;
			-webkit-overflow-scrolling:touch; /*加上这个让浏览器支持touch和自动滚动这样界面就可以滚动了*/
		}

		@media screen and (max-width: 320px) {
			.section {
				/*	 height: 330px;*/
			}
		}

		.k {
			width: 86%;
			height: 50px;
			line-height: 35px;
			background-size: cover;
			position: relative;
			margin: 5px auto 0;
			z-index: 9999;
			border-radius: 5px;
			background: url(images/list-bg.png) no-repeat;
			background-size: 100%;
		}

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
		}

		#wrapper {
			width: 100%;
		}

		.info {
			text-align: left;
			font-size: 0.7rem;
			height: 55px;
		}

		.tel {
			color: #ff9765;
			font-size: 0.7rem;
		}

		.time {
			color: #ff9765;
			font-size: 0.7rem;
		}

		.name {
			text-align: center;
			font-size: 1rem;
		}

		.free {
			text-align: center;
			float: left;
			color: #e65037;
			height: 30px;
			width: 30%;
			line-height: 30px;
			font-size: 0.7rem;
		}

		.num {
			text-align: center;
			float: left;
			color: #e65037;
			height: 30px;
			width: 30%;
			line-height: 30px;
			font-size: 0.7rem;
		}

		.num,
		.pic,
		.name,
		.grade,
		.time {
			text-align: center;
			float: left;
			color: #E7A7B8;
			height: 45px;
			width: 10%;
			line-height: 45px;
			font-size: 1.2rem;
		}

		.num {
			color: #000;
			font-weight: bold;
			font-size: 1.3rem;
			width: 15%;
		}

		.pic {
			width: 17%;
		}

		.tx {
			width: 32px;
			height: 32px;
			padding-left: 9%;
			text-align: center;
			border-radius: 10px;
			position: relative;
			top: -4px;
		}

		.name {
			width: 34%;
			text-align: left;
			padding-left: 4%;
			color: #3f6cac;
		}

		.grade {
			width: 10%;
		}

		.time {
			width: 14%;
		}

		.unit {
			color: #3f6cac;
		}

		.times {
			width: 75%;
			margin: 0 auto;
			color: #3f6cac;
			text-align: left;
			font-size: 1rem;
			margin-top: 14%;
		}

		.wz {
			line-height:20px;
		}

		.iw_poi_title {
			color: #CC5522;
			font-size: 14px;
			font-weight: bold;
			overflow: hidden;
			padding-right: 13px;
			white-space: nowrap
		}

		.iw_poi_content {
			font: 12px arial, sans-serif;
			overflow: visible;
			padding-top: 4px;
			white-space: -moz-pre-wrap;
			word-wrap: break-word
		}

		.map {
			width: 60%;
			margin-left: 13%;
			/*top: -5px;
			height: 125px;*/
			border-radius: 3%;
		}

		.ok-btn {
			width: 25%;
			 margin-top: 125px; 
		}
		.code{
			width: 20%;
			position: absolute;
			top: 45%;
    		left: 68%;
		}
		.add{
			padding-left: 25%;
		}
	</style>

</head>

<body class="miva">
	<!-- 排行榜页面 -->
	<div class="content">
		<div class="page">
			<img src="images/exit.png" alt="" class="exit">
			<img src="images/djsm.png" alt="" class="explain">
			<div class="section">
				<div v-for="(temp, index) in list" class="k">
					<div id="wrapper">
						<li class="info">
							<div class="num">{{index+1}}</div>
							<div class="pic"><img :src="temp.head_img" class="tx"></div>
							<div class="name">{{temp.nick_name}}</div>
							<div class="grade">{{temp.score}}<span class="unit">分</span></div>
							<!-- <div class="time">无<span class="unit"><span></div> -->
						</li>
					</div>
				</div>
			</div>
		</div>
		<!-- 兑奖说明	 -->
		<div class="page2">
			<div class="times">
				<div class="wz">领奖地点：西安市雁塔区高新四路30号<br>
					<span class="add">高新地产销售分公司</span></div>
				<div>领取时间：5月13日-5月18日(9:00-17:00)</div>
			</div>
			<div class="code"><img src="images/code.png" alt="" width="100%"></div>
			<!--百度地图容器-->
			<!--<img src="images/dd.png" alt="" class="map">-->
			<img src="images/ok.png" alt="" class="ok-btn">
		</div>
	</div>
</body>
<script>
	new Vue({
		el: ".content",
		data: {
			list: []
		},
		created() {
			var miva = this;
			$.get("http://59.110.214.170:23333/paihang").then(function (res) {
				console.log(res)
				miva.list = res;
			})
		},
		mounted() {

		}
	})
</script>
<script>
	$(function () {
		$('.explain').click(function () {
			$('.page2').show('');
			$('.page').hide('');
		});
		$('.ok-btn').click(function () {
			$('.page2').hide('');
			$('.page').show('');
		});
	})
</script>

<!--<script type="text/javascript">
	//创建和初始化地图函数：
	function initMap() {
		createMap();//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件
		addMapOverlay();//向地图添加覆盖物
	}
	function createMap() {
		map = new BMap.Map("map");
		map.centerAndZoom(new BMap.Point(108.900719	, 34.23502), 18);
	}
	function setMapEvent() {
		map.enableScrollWheelZoom();
		map.enableKeyboard();
		map.enableDragging();
		map.enableDoubleClickZoom()
	}
	function addClickHandler(target, window) {
		target.addEventListener("click", function () {
			target.openInfoWindow(window);
		});
	}
	function addMapOverlay() {
		var markers = [
			{ content: "我的备注", title: "高新地产", imageOffset: { width: -23, height: -21 }, position: { lat: 34.234779, lng: 108.901453 } }
		];
		for (var index = 0; index < markers.length; index++) {
			var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
			var marker = new BMap.Marker(point, {
				icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
					imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
				})
			});
			var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
			var opts = {
				width: 200,
				title: markers[index].title,
				enableMessage: false
			};
			var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
			marker.setLabel(label);
			addClickHandler(marker, infoWindow);
			map.addOverlay(marker);
		};
	}
	//向地图添加控件
	function addMapControl() {
		var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
		scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
		map.addControl(scaleControl);
		var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
		map.addControl(navControl);
	}
	var map;
	initMap();
</script>-->


</html>